<template>
	<view class="container">
		<u-navbar :border-bottom="false"  title="课件详情" title-color="#333" back-icon-color="#333"></u-navbar>
		<view class="video">
			<video v-if="subDetail.viewduration != null" controls @timeupdate="videoProcess" @play="startTimer" @pause="stopTimer" @ended="stopTimer" class="video_src" autoplay show-center-play-btn="true" :src="subDetail.path" :poster="subDetail.thumbnail" objectFit="cover" :initial-time="subDetail.viewduration"></video>
		</view>
		<view class="detailTit">
			<view class="subName">{{subDetail.subname}}</view>
			<view class="subTxt">{{subDetail.resourcename}}</view>
			<view class="subCollect" @click="subCollect" ><my-icon name="shoucang" :class="[collectStata?'Color':'']"></my-icon></view>
		</view>
		<u-count-down v-show="false" ref="timer" :autoplay="false"  :isCountDown="false" :show-days="false" :show-hours="true"></u-count-down>
		<view class="detailBot">
			<view class="detailCon">
				<view class="detailCon_tit">课程概述</view>
				<view class="detailRich">
					<rich-text  :nodes="subDetail.reintroduction"  :class="[richStyle?'':'openMore']"  style="text-indent: 1em;font-size: 30upx;"></rich-text>
					<view class="detailRichMore" v-if="richDis">
						<u-icon @click="richStyle=!richStyle" color="#999" size="28upx" :name="richStyle?'arrow-up':'arrow-right'" :label="richStyle?'收起':'...'" label-color="#999" label-size="26upx" label-pos="left"></u-icon>
					</view>
				</view>			
				</u-read-more>
			</view>
			
			<view class="detailOther">
				<view class="detailCon_tit">课程推荐</view>
			</view>
			<view class="scroll-lib">
				<scroll-view :scroll-x="true" :show-scrollbar="false">
					<view class="scroll-container">
						<view class="item" @click="subItemClick(item.resourceId)" v-for="(item, index) in subDetail.courseChapterVOS" :key="'hotCourse' + index">
							<image width="100%" height="100%" :src="item.thumbnail"></image>
							<view class="subContent">
									<text>{{item.resourceName}}</text>
							</view>
							<view class="content" >
								<view class="view-count">
									<my-icon name="replay" color="#fff" label-size="22upx" label-color="#fff" :label="item.views.toString()"></my-icon>
									<!-- <u-icon name="eye" color="#fff" size="18upx" label-size="18upx" label-color="#fff" :label="item.views+''"></u-icon> -->
									</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	  <!-- <view class="randomBot"><u-image width="40" height="38" :src="require('../../static/classRoom/subjectDetail_bot.png')"></u-image><text>随机课堂</text></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subDetail:'',//名称
				richStyle:false,//默认关闭
				richDis:false,//是否显示
				resourceId:0,//id
				collectStata:false,//状态
				openTime:'',//视频开始时间
				levaTime:'',//离开时间
				currentTime:0,//视频播放时间
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20upx"
				}
			};
		},
		onLoad(options) {
		  this.resourceId=options.resourceId
			this.init()
			this.openTime=this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
			//app 后台监听
			uni.$on('app-hide', () => {
				// 离开
				this.levaTime=new Date().getTime()
				this.reportOnline(this.levaTime)
				this.stopTimer();
			});
		},
		onUnload(){
			this.levaTime=new Date().getTime()
			this.reportOnline(this.levaTime);
		},
		methods:{
			videoProcess(e){
				// 监听视频进度触发频率 250ms 一次
				this.currentTime = Number(e.detail.currentTime);
			},
			startTimer() {
				//定时器启动
				this.$refs.timer && this.$refs.timer.start();
			},
			stopTimer() {
				//定时器暂停
				this.$refs.timer && this.$refs.timer.stop();
			},
			timerSeconds() {
				//获取定时器剩余时间
				return (this.$refs.timer && this.$refs.timer.seconds) || 0;
			},
			reportOnline(levTime){
				const staTime=uni.getStorageSync('joinTime')//上线时间
				const time=parseInt((levTime - staTime) / 1000)?parseInt((levTime - staTime) / 1000):1;//如果从当前页面直接退出APP
				const onlineStart=this.$u.timeFormat(staTime, 'yyyy-mm-dd hh:MM:ss')//上线时间
				const process= parseInt((this.currentTime/this.subDetail.videoduration)*100)//进度
				let timerSec=uni.getSystemInfoSync().platform=="android"?parseInt(this.timerSeconds())/2:parseInt(this.timerSeconds())//安卓计时双倍修复
				const pageData={
					duration:time,
					onlineStart,
					userStudies:[{
									"duration": timerSec,
									"process": process<1?1:process,
									"resourceId": parseInt(this.resourceId),
									"viewStart": this.openTime
						}],
					userType:1
				}
				uni.setStorageSync('vedioData', pageData);
				return new Promise((resolve, reject) => {
					this.request
						.post('/app/teacher/home/reportUserOnline',pageData)
						.then(res => {
							console.log(res,'上报成功')
							resolve();
						})
						.catch(reject);
				});
			},
			subCollect(){
				const state=this.collectStata?2:1
				return new Promise((resolve, reject) => {
					this.request
						.get(`/app/teacher/course/collectCourse/${this.resourceId}/${state}`)
						.then(res => {
							let warn=''
							if(state==1){
								warn='收藏成功'
							}else{
								warn='取消收藏'
							}
							uni.showToast({
								duration:1000,
								title:warn,
								icon:'success'
							})
							this.init()
							resolve();
						})
						.catch(reject);
				});
			},
			init(){
				return this.getClassList(this.resourceId)
			},
			getClassList(id){
				//课程列表
				return new Promise((resolve, reject) => {
					this.request
						.get(`/app/teacher/course/courseDetail/${id}`)
						.then(res => {
							this.subDetail=res;
							this.collectStata=res.isCollect//是否收藏
							this.subDetail.reintroduction=res.reintroduction.split('<o:p></o:p>').toString()
							if(res.reintroduction.length>100){
								this.richDis=true
							}
							resolve();
						})
						.catch(reject);
				});
			},
			// 点击跳转
			subItemClick(data){
				this.resourceId=data
				this.getClassList(data)
				// uni.navigateTo({
				// 	url: 'subjectDetail?resourceId='+data
				// });
			}
		}
	}
</script>
<style>
	::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
	} 
	.container .u-navbar.u-navbar-fixed{
		background: #fff!important;
	}
</style>
<style lang="scss" scoped>
	.Color{
		color: #F45C4B!important;
	}
	.subCollect{
		position: absolute;
		right: 30upx;
		top: 40upx;
		.iconfont{
			font-size: 42upx;
			color: #363940;
		}
	}
.icon-replay{
	font-size: 16upx;
}
	.video{
		width: 100%;
		height: 422upx;
		position: relative;
		video{
			width: 100%;
			height: 100%;
		}
		.video_left{
			position:absolute;
			left: 25upx;
			top: 50upx;
			z-index: 10;
		}
		.video_src{
			position: absolute;
			z-index: 8;
		}
	}
	.detailRich{
		position: relative;
		rich-text{
			font-size: 30upx;
			color: #787D89;
			line-height: 42upx;
			letter-spacing: .03rem;
		}
	}
	.detailRichMore{
		background: #fff;
		position: absolute;
		right: 9upx;
		bottom: 0;
		height: 42upx;
		display: flex;
		padding-right: 2upx;
		align-items: center;
		.u-iconfont{
			margin-right:21upx;
		}
	}
	.detailTit{
		background: #fff;
		padding: 30upx;
		padding-right: 100upx;
		position: relative;
		.subName{
			font-size: 26upx;
			color: #797F8A;
		}
		.subTxt{
			color: #363940;
			font-size: 32upx;
			font-weight:500;
			overflow: hidden;
		}
	}
	.detailOther{
		margin-top: 59upx;
	}
	.detailCon{
		padding-right: 30upx;
	}
	.detailCon_tit{
		font-size: 32upx;
		color: #363940;
		font-weight: 400;
		margin: 19upx 0 30upx;
		display: flex;
		align-items:center;
	}
	.detailCon_tit::before{
		content: '  ';
			width: 8upx;
		  height: 26upx;
		  line-height:26upx;
			border-radius:35upx;
		  background: -webkit-linear-gradient(to bottom, #fc7767, #ec412f);
		  background: linear-gradient(to bottom, #fc7767, #ec412f);
			float:left;
			margin-right: 17upx;
	}
	.detailBot{
		background: #fff;
		border-top: 20upx solid #F5F5F5;
		padding: 30upx;
		padding-right: 0;
	}
	.scroll-lib{ height:176upx; 
	overflow: hidden;}
	.scroll-container {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 40upx;
		height: 176upx;
		.item {
			position: relative;
			z-index: 99;
			min-width: 286upx;
			height: 100%;
			margin-right: 18upx;
			border-radius: 10upx;
			overflow: hidden !important;
			image {
				z-index: -1;
				width: 100%;
				height: 100%;
			}
			.content {
				width: 100%;
				height: 100%;
				position: absolute;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				top: 0;
				left: 0;
				color: white;
				.view-count {
					display: flex;
					justify-content: flex-end;
					padding: 10upx;
				}
				text {
					display: block;
					text-align: center;
					font-size: 32upx;
					font-weight: 700;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 0 auto;
					white-space: nowrap;
					width: 221upx;
				}
				text:last-child {
					font-size: 18upx;
					flex: unset;
					font-weight: 400;
					margin-bottom: 12upx;
					white-space: nowrap;
				}
			}
		}
	}
	.subContent{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		color: white;
		text {
			display: block;
			text-align: center;
			font-size: 32upx;
			font-weight: 600;
			overflow: hidden;
			width: 221upx;
			max-height: 80upx;
			line-height: 40upx;
			vertical-align: middle;
		}
	}
	.randomBot{
		position: fixed;
		    bottom: 0;
		    left: 0;
		    right: 0;
		    z-index: 1000;
		    -webkit-transition: all 0.2s ease-in-out;
		    transition: all 0.2s ease-in-out;
		    -webkit-transform: translate3d(0, calc(100% - 62px), 0);
		    transform: translate3d(0, calc(100% - 62px), 0);
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    background-color: #ffffff;
		    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
		    overflow: hidden;
				height: 100upx;
				justify-content: center;
				text-align: center;
				.u-image{
					margin-right: 20upx;
					margin-top: 30upx;
				}
				text{
									line-height: 100upx;
				}
	}
	.openMore{
		max-height: 170upx;
		overflow: hidden;
		display:block;
	}
</style>
